<script lang="ts" setup>
import { ref } from 'vue'
import xlkTabBar from "../components/tab-bar.vue"

const categories1 = ref([
    { icon: '', label: '早教' },
    { icon: '', label: '幼儿园' },
    { icon: '', label: '音乐' },
    { icon: '', label: '舞蹈' },
    { icon: '', label: '美术' },
    { icon: '', label: '篮球' },
    { icon: '', label: 'Ai数学' },
    { icon: '', label: 'Ai英语' },
    { icon: '', label: '模特' },
    { icon: '', label: '瑜伽' },
])

const categories2 = ref([
    { icon: '', label: '健身' },
    { icon: '', label: '跆拳道' },
])
</script>

<template>
    <umrp-page bg-color="linear-gradient(to bottom, #1890ff30 0% , #1890ff10 20%, #1890ff10 20%,#fff 100%)">
        <umrp-title-bar>
            <umrp-text-icon direction="horizonal" :size="4" :icon-props="{ name: 'local' }">广州</umrp-text-icon>
            <umrp-input-search></umrp-input-search>
        </umrp-title-bar>
        <umrp-carousel>
            <umrp-carousel-item>
                <umrp-image :height="140"></umrp-image>
            </umrp-carousel-item>
        </umrp-carousel>
        <umrp-card :border="false">
            <template #body>
                <umrp-container direction="horizonal" justify="between" align="center" bg-color="#333333" padding="8px"
                    v-route="'XiaolankaClientLogin'">
                    <umrp-space :size="10" align="center">
                        <umrp-avatar :width="24" :height="24"></umrp-avatar>
                        <umrp-text color="#fff" :size="12">Hey，来跟小蓝卡打个招呼</umrp-text>
                    </umrp-space>
                    <umrp-text color="#fff" :size="12">登录/注册</umrp-text>
                </umrp-container>
                <umrp-carousel :indicator-offset="{ bottom: 5 }">
                    <umrp-carousel-item>
                        <umrp-container padding="20px 0 28px 0" :height="150">
                            <umrp-grid :cols="5" :col-gap="10" :row-gap="10">
                                <umrp-grid-item v-for="(category, index) in categories1" :key="index">
                                    <umrp-text-icon>{{ category.label }}</umrp-text-icon>
                                </umrp-grid-item>
                            </umrp-grid>
                        </umrp-container>
                    </umrp-carousel-item>
                    <umrp-carousel-item>
                        <umrp-container padding="20px 0 28px 0" :height="150">
                            <umrp-grid :cols="5" :col-gap="10" :row-gap="10">
                                <umrp-grid-item v-for="(category, index) in categories2" :key="index">
                                    <umrp-text-icon>{{ category.label }}</umrp-text-icon>
                                </umrp-grid-item>
                            </umrp-grid>
                        </umrp-container>
                    </umrp-carousel-item>
                </umrp-carousel>
            </template>
        </umrp-card>
        <umrp-container padding="10px" :gap="10">
            <umrp-carousel>
                <umrp-carousel-item>
                    <umrp-image :height="100"></umrp-image>
                </umrp-carousel-item>
            </umrp-carousel>
            <umrp-card>
                <template #body>
                    <umrp-container padding="10px" :gap="10">
                        <umrp-container direction="horizonal" justify="between">
                            <umrp-text bold>我的优惠专区</umrp-text>
                            <umrp-text>查看全部</umrp-text>
                        </umrp-container>
                        <umrp-row :gutter="10" style="flex:1">
                            <umrp-col :span="12" bg-color="#">
                                <umrp-placeholder :height="60">5折优惠券</umrp-placeholder>
                            </umrp-col>
                            <umrp-col :span="12">
                                <umrp-placeholder :height="60">5折优惠券</umrp-placeholder>
                            </umrp-col>
                        </umrp-row>
                        <umrp-row :gutter="10" style="flex:1">
                            <umrp-col :span="12">
                                <umrp-image :height="170"></umrp-image>
                            </umrp-col>
                            <umrp-col :span="12">
                                <umrp-row :gutter="[0, 10]">
                                    <umrp-col :span="24">
                                        <umrp-image :height="80"></umrp-image>
                                    </umrp-col>
                                    <umrp-col :span="24">
                                        <umrp-image :height="80"></umrp-image>
                                    </umrp-col>
                                </umrp-row>
                            </umrp-col>
                        </umrp-row>
                    </umrp-container>
                </template>
            </umrp-card>
            <umrp-card>
                <template #body>
                    <umrp-container padding="10px" :gap="10">
                        <umrp-text bold>活动区</umrp-text>
                        <umrp-placeholder :height="80">教培小蓝卡活动入口</umrp-placeholder>
                        <umrp-placeholder :height="80">洗车小蓝卡活动入口</umrp-placeholder>
                        <umrp-placeholder :height="80">美业小蓝卡活动入口</umrp-placeholder>
                    </umrp-container>
                </template>
            </umrp-card>
            <umrp-card>
                <template #body>
                    <umrp-container padding="10px" :gap="10">
                        <umrp-container direction="horizonal" justify="between">
                            <umrp-text bold>特价/全场五折区</umrp-text>
                            <umrp-text v-route="'XiaolankaClientProductDiscounted'">查看全部</umrp-text>
                        </umrp-container>
                        <umrp-row :gutter="10">
                            <umrp-col :span="12">
                                <umrp-image :height="170"></umrp-image>
                            </umrp-col>
                            <umrp-col :span="12">
                                <umrp-row :gutter="[0, 10]">
                                    <umrp-col :span="24">
                                        <umrp-image :height="80"></umrp-image>
                                    </umrp-col>
                                    <umrp-col :span="24">
                                        <umrp-image :height="80"></umrp-image>
                                    </umrp-col>
                                </umrp-row>
                            </umrp-col>
                        </umrp-row>
                    </umrp-container>
                </template>
            </umrp-card>
            <umrp-container>
                <umrp-text :size="16" align="center" bold>甄选商品</umrp-text>
            </umrp-container>
            <umrp-grid :cols="2" :col-gap="10" :row-gap="10">
                <umrp-grid-item v-for="_ in 10" v-route="'XiaolankaClientProductDetail'">
                    <umrp-card>
                        <template #cover>
                            <umrp-image :height="180"></umrp-image>
                        </template>
                        <template #body>
                            <umrp-container padding="10px" :gap="6">
                                <umrp-text :size="12" bold>库迪咖啡 全场饮品任选券</umrp-text>
                                <umrp-text color="red" :size="12">￥99</umrp-text>
                                <umrp-text color="red" :size="12">到手价：￥66</umrp-text>
                                <umrp-container direction="horizonal" justify="between" align="center" width="100%">
                                    <umrp-text color="secondary" :size="12">已售卖443123+件</umrp-text>
                                    <umrp-button type="primary" shape="circle">抢</umrp-button>
                                </umrp-container>
                            </umrp-container>
                        </template>
                    </umrp-card>
                </umrp-grid-item>
            </umrp-grid>
        </umrp-container>
        <xlk-tab-bar />
    </umrp-page>
</template>